<template>
	<view>
		<!-- #ifndef MP -->
		<view class="sys-head" :style="{ height: statusBarHeight }"></view>
		<!-- #endif -->
		<view class="content">
			<view class="acea-row row-top row-between title">
				<view class="">
					<view class="title-black">在商和铺你想做什么</view>
					<view class="title-gray">根据你的需求推荐更合适的内容</view>
				</view>
				<view class="jump">跳过</view>
			</view>
			<view class="module-box">
				<view class="module-title">
					商铺服务（多选）
				</view>
				<view class="acea-row list">
					<view :class="item.check?'item-checked':'item'" v-for="(item,index) in storeService" :key="index" @click="choose('storeService',index)">{{item.name}}</view>
				</view>
			</view>
			
			<view class="module-box">
				<view class="module-title">
					二手闲置（多选）
				</view>
				<view class="acea-row list">
					<view :class="item.check?'item-checked':'item'" v-for="(item,index) in second" :key="index" @click="choose('second',index)">{{item.name}}</view>
				</view>
			</view>
			
			<view class="module-box">
				<view class="module-title">
					商家服务（多选）
				</view>
				<view class="acea-row list">
					<view :class="item.check?'item-checked':'item'" v-for="(item,index) in service" :key="index" @click="choose('service',index)">{{item.name}}</view>
				</view>
			</view>
			<view class="module-box">
				<view class="module-title">
					品牌服务（多选）
				</view>
				<view class="acea-row list">
					<view :class="item.check?'item-checked':'item'" v-for="(item,index) in brandService" :key="index" @click="choose('brandService',index)">{{item.name}}</view>
				</view>
			</view>
			<view class="module-box">
				<view class="module-title">
					供应链（多选）
				</view>
				<view class="acea-row list">
					<view :class="item.check?'item-checked':'item'" v-for="(item,index) in supplyChain" :key="index" @click="choose('supplyChain',index)">{{item.name}}</view>
				</view>
			</view>
		</view>
		<view class="uni-p-b-98"></view>
		<view class="btn">
			开启你的生意之旅
		</view>
	</view>
</template>

<script>
	var statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
	export default {
		data() {
			return {
				statusBarHeight:statusBarHeight,
				storeService:[{name:'求租',check:false},{name:'转让',check:false},{name:'出售',check:false},{name:'求购',check:false}],//商铺服务
				second:[{name:'求购',check:false},{name:'交换',check:false},{name:'出售',check:false}],//二手闲置
				service:[{name:'工商财务',check:false},{name:'拓客引流',check:false},{name:'装修',check:false},{name:'招工',check:false},{name:'广告传媒',check:false},{name:'搬家',check:false},{name:'租金垫付',check:false},{name:'团购',check:false}],//商家服务
				brandService:[{name:'品牌入驻',check:false},{name:'申请加盟',check:false}],//品牌服务
				supplyChain:[{name:'找供应链',check:false},{name:'加入供应链',check:false}]//供应链
			};
		},
		methods:{
			choose(type,index){
				if(type=='storeService'){
					this.storeService[index].check = !this.storeService[index].check
				}
				if(type=='second'){
					this.second[index].check = !this.second[index].check
				}
				if(type=='service'){
					this.service[index].check = !this.service[index].check
				}
				if(type=='brandService'){
					this.brandService[index].check = !this.brandService[index].check
				}
				if(type=='supplyChain'){
					this.supplyChain[index].check = !this.supplyChain[index].check
				}
			}
		}
	}
</script>

<style lang="scss">
.sys-head{
	width: 100%;
	background: #fffff;
}
.content{
	padding: 26rpx;
}
.title{
	.title-black{
		font-size: 48rpx;
		font-weight: 700;
		color: rgba(0, 0, 0, 1);
	}
	.title-gray{
		font-size: 28rpx;
		font-weight: 400;
		color: rgba(128, 128, 128, 1);
	}
	.jump{
		width: 144rpx;
		height: 68rpx;
		line-height: 68rpx;
		opacity: 1;
		border-radius: 60rpx;
		background: rgba(255, 255, 255, 1);		
		border: 1px solid rgba(153, 153, 153, 1); 
		font-size: 28rpx;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		text-align: center;
	}
}

.module-box{
	margin-top: 32rpx;
	.module-title{
		font-size: 32rpx;
		font-weight: 400;
		color: rgba(0, 0, 0, 1);
	}
	.list{
		margin-top: 32rpx;
	}
	.item{
		height: 64rpx;
		line-height: 52rpx;
		text-align: center;
		font-size: 28rpx;
		font-weight: 400;
		color: rgba(128, 128, 128, 1);
		opacity: 1;
		border-radius: 43rpx;
		background: rgba(247, 247, 247, 1);
		margin-right:22rpx;
		margin-bottom: 22rpx;
		padding: 6rpx 30rpx;
	}
	.item-checked{
		height: 64rpx;
		line-height: 52rpx;
		text-align: center;
		font-size: 28rpx;
		color: #ffffff;
		opacity: 1;
		border-radius: 43rpx;
		background: rgba(238, 33, 45, 1);
		// border: 1px solid rgba(238, 33, 45, 1);  
		margin-right:22rpx;
		margin-bottom: 22rpx;
		padding: 6rpx 30rpx;
	}
}

.btn{
	margin: 26rpx;
	width: 644rpx;
	height: 102rpx;
	color: #ffffff;
	text-align: center;
	line-height: 102rpx;
	opacity: 1;
	border-radius: 20rpx;
	background: rgba(238, 33, 45, 1);
	position: fixed;
	bottom: 42rpx;
	left: 50%;
	margin-left: -322rpx;
}
</style>
<style>
	page{
		background: #ffffff!important;
	}
</style>
